



<template>
  <ux-grid border
           show-overflow
           ref="plxTable"
           keep-source
           height="500"
           :edit-config="{trigger: 'click', mode: 'cell'}">

    <ux-table-column type="index"
                     width="80"></ux-table-column>
    <ux-table-column field="name"
                     title="名字"
                     min-width="140"
                     edit-render>
      <template v-slot:edit="scope">
        <el-input v-model="scope.row.name"></el-input>
      </template>
    </ux-table-column>

  </ux-grid>
</template>

  <script>
export default {
  name: 'Home1',
  data () {
    return {
      tableData: [],
      columns: [],
      sexList: [
        { value: 1, label: '男' },
        { value: 2, label: '女' },
        { value: 3, label: '未知' }
      ],
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }]
    }
  },
  mounted () {
    // 延迟加载
    setTimeout(() => {
      this.columns = Array.from({ length: 200 }, (_, idx) => ({
        prop: 'name',
        // id: idx,
        // label: '名字' + idx,
        // width: 200,
        // sortable: idx === 1,
        // resizable: true
      }))
      this.tableData = Array.from({ length: 500 }, (_, idx) => ({
        id: idx + 1,
        date: '2016-05-03',
        name: '张三' + idx,
        sex: 1,
        age: 18 + idx,
        time: '9:10',
        address: ['zhinan', 'shejiyuanze', 'kekong'],
        single: idx < 2
      }))
      // 这样设置大量数据的表格
      this.$refs.plxTable.reloadData(this.tableData)
      // 获取表格实例，里面可以得到列，表格数据等等
      console.log(this.$refs.plxTable.tableExample())
    })
  },
  methods: {


  }
}
  </script>